<template>
  <div class="index-page">
    <div class="head-con-bg flex">
      <img v-lazy="logo" alt class="logo">
      <div class="head-line"></div>
      <div class="head-desc">
        <p class="header-title">10 年 专 注</p>
        <p style="font-size:.24rem">代缴行业的领导者</p>
      </div>
      
      <a href="tel:4000-600-901" class="call">
        <img src="./images/head2.png" alt>
      </a>
    </div>

    <img v-lazy="headBg" alt class="header-bg">
    <div class="consult">
      <h4 class="consult-title">1对1深度免费咨询</h4>
      <form class="from-group">
        <input type="text" placeholder="请您填写真实的手机号" v-model="telPhone">
        <a href="javascript:;" @click="submit(1)">我要咨询</a>
      </form>
    </div>

    <div class="pic-title title-one">
      <p>10年专注 安全可靠</p>
      <strong>10年专注 安全可靠</strong>
    </div>
    <div class="safe-box">
      <img v-lazy="pic3" alt class="pic3">
      <h2>
        <img v-lazy="pic2" alt class="pic2">一杯奶茶价格享受知名级企业服务
      </h2>
      <p>
        <span>￥</span>
        <strong>33</strong>
        <span>/人.月</span>
      </p>
    </div>
    <div class="tac">
      <img v-lazy="pic4" alt class="pic4">
    </div>
    <div class="tac">
      <div class="pic-title pic5">
        <p>10年匠心 无微不至</p>
        <strong>10年匠心 无微不至</strong>
      </div>
    </div>

    <div class="info-list">
      <ul>
        <li>
          <h4>
            <span>33</span>元/月
          </h4>
          <p>行业良心价</p>
        </li>
        <li>
          <h4>
            <span>30</span>w
          </h4>
          <p>累积客户体验</p>
          <h3>+</h3>
        </li>
        <li>
          <h4>
            <span>2</span>天
          </h4>
          <p>官方截图回传</p>
        </li>
      </ul>
    </div>
    <a href="tel:4000-600-901" class="no-money-consult">
      <img v-lazy="pic6" alt>一键免费咨询
    </a>

    <div class="tac">
      <div class="pic-title pic5">
        <p>10年众多案例为您保驾护航</p>
        <strong>10年众多案例为您保驾护航</strong>
      </div>
    </div>
    <div class="container example clearfix">
      <img v-for="item in exampleList" :key="item.id" v-lazy="item" alt>
    </div>
    <a href="tel:4000-600-901" class="no-money-consult">
      <img v-lazy="pic6" alt>一键免费咨询
    </a>
    <div class="title8">
      <div class="pic-title">
        <p>一线知名企业共同的选择</p>
        <strong>一线知名企业共同的选择</strong>
      </div>
    </div>

    <div class="section-partner">
      <div class="container">
        <ul>
          <li v-for="item in hzList" :key="item.id">
            <img :alt="item.title" v-lazy="item.img">
            <div class="title">{{item.title}}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section-honor">
      <div class="container">
        <h3 class="box-tit">
          <div class="pic-title pic9">
            <p>迭代缴还是权威认证的靠谱</p>
            <strong>迭代缴还是权威认证的靠谱</strong>
          </div>
        </h3>

        <ul>
          <li v-for="item in honorList" :key="item.id">
            <img v-lazy="item">
          </li>
        </ul>
      </div>
    </div>
    <a href="tel:4000-600-901" class="no-money-consult">
      <img v-lazy="pic6" alt>一键免费咨询
    </a>
    <h3 class="intrduce-title">请客服来电为您介绍</h3>
    <form class="consult-form">
      <ul>
        <li>
          <img v-lazy="form1">
          <input type="text" placeholder="请填写您的姓名" v-model="userName">
        </li>
        <li>
          <img v-lazy="form2">
          <input type="text" placeholder="请填写您的手机号" v-model="mobile">
        </li>
      </ul>
      <a href="javascript:;" class="consult-submit" @click="submit(2)">免费注册咨询</a>
      <p class="guarantee">*您的信息将被严格保密，请放心填写</p>
      <p class="blongs">蜂窝社保隶属于上海鼎博劳务派遣有限公司</p>
    </form>
    
    <!-- <div class="tac" style="background:#f3f3f3;">
      <img v-lazy="pic_10" alt class="map">
    </div> -->
    <div style="height:3rem;"></div>
    <div class="footer">
      <ul>
        <li>
          <a
            href="https://webchat.7moor.com/wapchat.html?accessId=2222acc0-0e6e-11e9-999c-3f4c83a52832&fromUrl=&urlTitle="
          >
            <img v-lazy="footer1" alt>
          </a>
        </li>
        <li>
          <a
            href="https://webchat.7moor.com/wapchat.html?accessId=2222acc0-0e6e-11e9-999c-3f4c83a52832&fromUrl=&urlTitle="
          >
            <img v-lazy="footer2" alt>
          </a>
        </li>
        <li>
          <a href="tel:4000-600-901">
            <img v-lazy="footer3" alt>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import API from "@/api";
import { Dialog, Toast, Loading } from "vant";
export default {
  components: {
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [Loading.name]: Loading
  },
  data() {
    return {
      honorList: [
        require("./images/honor_01.jpg"),
        require("./images/honor_02.jpg"),
        require("./images/honor_03.jpg"),
        require("./images/honor_04.jpg"),
        require("./images/honor_05.jpg"),
        require("./images/honor_06.jpg")
      ],
      img: require("../../assets/images/loading.gif"),
      hzList: [
        { img: require("./images/hz_01.jpg"), title: "华为" },
        { img: require("./images/hz_02.jpg"), title: "盒马" },
        { img: require("./images/hz_03.jpg"), title: "日月光集团" },
        { img: require("./images/hz_04.jpg"), title: "上海人寿" },
        { img: require("./images/hz_05.jpg"), title: "星巴克" },
        { img: require("./images/hz_06.jpg"), title: "酒老板" },
        { img: require("./images/hz_07.jpg"), title: "上海银行" },
        { img: require("./images/hz_08.jpg"), title: "西贝" }
      ],
      exampleList: [
        require("./images/pic_1.jpg"),
        require("./images/pic_2.jpg"),
        require("./images/pic_3.jpg"),
        require("./images/pic_4.jpg"),
        require("./images/pic_5.jpg"),
        require("./images/pic_6.jpg"),
        require("./images/pic_7.jpg"),
        require("./images/pic_8.jpg"),
        require("./images/pic_9.jpg")
      ],
      pic1: require("./images/pic1.png"),
      pic2: require("./images/pic2.png"),
      pic3: require("./images/pic3.png"),
      pic4: require("./images/pic4.png"),
      pic5: require("./images/pic5.png"),
      pic6: require("./images/pic6.png"),
      pic7: require("./images/pic7.png"),
      pic8: require("./images/pic8.png"),
      pic9: require("./images/pic9.png"),
      head1: require("./images/head1.png"),
      headBg: require("./images/headBg.jpg"),
      logo: require("../../assets/images/logo.png"),
      form1: require("./images/from1.png"),
      form2: require("./images/form2.png"),
      pic_10: require("./images/pic_10.png"),
      footer1: require("./images/footer1.png"),
      footer2: require("./images/footer2.png"),
      footer3: require("./images/footer3.png"),
      userName: "",
      mobile: "",
      telPhone: ""
    };
  },
  mounted() {
    this.initCount()
    this.urlReferrer()
  },
  methods: {
    initCount() {
      $.ajax({
        type: "post",

        url: "/api/number",

        data: { flag: 0 },

        dataType: "json",

        success: function(data) {
          if (data.status == 1) {
            //$(".tips em").html(data.result);
          }
        },

        error: function(result) {
          console.log(result.statusText);
        }
      });
    },
    urlReferrer() {
      var current_url = window.location.href;
      console.log(current_url)

      var referrer = document.referrer;
console.log(referrer)
      var words = decodeURI(this.getQueryStringByName(referrer, "word", "wd"));

      $.ajax({
        type: "post",

        url: "/api/urlreferrer",

        data: { referrer: current_url, words: words },

        dataType: "json",

        success: function(data) {
          console.log(data.status);
        },

        error: function() {}
      });
    },
    getQueryStringByName(url, name, second) {

    var result = url.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));

    if (result == null || result.length < 1) {

        result = url.match(new RegExp("[\?\&]" + second + "=([^\&]+)", "i"));

        if (result == null || result.length < 1) {

            return "";

        } else {

            return result[1];

        }

        return "";

    }

    return result[1];

},
    submit(type) {
      var data = {};
      var regexMoble = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
      if (type == 1) {
        data = {
          name: "匿名",
          phone: this.telPhone,
          msg: "1分钟轻松交社保"
        };
        console.log("进入这里");
        console.log(this.telPhone);
        console.log(regexMoble.test(this.telPhone));
        if (!regexMoble.test(this.telPhone)) {
          Dialog.alert({
            title: "",
            message: "请输入正确的手机号"
          }).then(() => {
            // on close
          });
          return;
        }
      } else {
        data = {
          name: this.userName,
          phone: this.mobile,
          msg: ""
        };
        if (this.userName == "") {
          Dialog.alert({
            title: "",
            message: "请填写用户名"
          }).then(() => {
            // on close
          });
          return;
        } else if (!regexMoble.test(this.mobile)) {
          Dialog.alert({
            title: "",
            message: "请输入正确的手机号"
          }).then(() => {
            // on close
          });
          return;
        }
      }

      $.ajax({
        type: "post",
        url: "/api/calculation1",
        data: data,
        dataType: "json",
        beforeSend: function() {
          Toast.loading({
            mask: true,
            message: "加载中..."
          });
          console.log("发送中");
        },
        success: function(data) {
          if (data.status == 1) {
            Dialog.alert({
              title: "",
              message:
                "提交成功，稍后我们将给您回拨电话，为您提供更详细方案！蜂窝社保感谢您的咨询！"
            }).then(() => {
              // on close
            });
          } else {
            alert(data.msg);
          }
        },

        error: function() {
          console.log("进入错误页面 error");
        },

        complete: function() {
          console.log("已完成");
        }
      });
    }
  }
};
</script>
<style src="./index.css"></style>
